<template>
  <div>
    <van-search v-model="form.name" left-icon="" shape="round" placeholder="搜索商品名称" @focus="searchBtn=true">
      <template #right-icon v-if="searchBtn">
        <van-button type="primary" round @click="search">搜索</van-button>
      </template>
    </van-search>
    <div class="history" v-if="searchBtn">
      <div class="top">
        <p>历史搜索</p>
        <div class="img" @click="clearHistory">
          <van-image :src="require('../../assets/img/delete.png')" fit="cover" />
        </div>
      </div>
      <div class="list">
        <div class="box" v-for="(item,index) in searchList" :key="index" @click="historySearch(item)">{{item}}</div>
      </div>

    </div>
    <div class="tabBox">
      <van-tabs v-model="active" @click="onClick" v-if="!searchBtn" class="tab">
        <van-tab title="全部商品"></van-tab>
        <van-tab title="销量"></van-tab>
        <van-tab>
          <template #title>
            <div class="title" style="display:flex">
              <div class="left">价格</div>
              <div class="img"><img src="../../assets/img/home/sort.png" alt="" :class="sort=='2'?'sort':''"></div>
            </div>

          </template>
        </van-tab>
      </van-tabs>
    </div>
    <van-list v-model="loading" :finished="finished" @load="onLoad" v-if="!searchBtn" :error.sync="err" error-text="加载失败，点击这里重试">
      <RowsList :list="list" style="margin-top:12px"></RowsList>
    </van-list>
  </div>
</template>
<script>
import RowsList from '../../components/rowsList.vue'
import { Dialog } from 'vant';
export default {
  name: '',
  components: {
    RowsList,
  },
  mixins: [],
  props: {

  },
  data () {
    return {
      value: "",
      searchList: JSON.parse(localStorage.getItem('history')),
      searchBtn: true,
      list: [],
      page: 1,
      loading: false,
      finished: true,
      err: false,
      form: {
        name: ''
      },
      active: '0',
      sort: "1",
    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {

  },
  methods: {
    onLoad () {
      this.page++
      this.productlist()

    },
    //历史搜索
    historySearch (item) {
      this.form.name = item
      this.productlist()
      this.list = []
    },
    //搜索
    search () {

      let history = JSON.parse(localStorage.getItem('history'))
      if (this.form.name) {
        if (history) {
          history.unshift(this.form.name)
          history = [...new Set(history)]
          localStorage.setItem('history', JSON.stringify(history))

        } else {

          localStorage.setItem('history', JSON.stringify([this.form.name]))
        }
      }
      this.searchList = JSON.parse(localStorage.getItem('history'))
      this.list = []
      this.productlist()
    },
    //获取搜索的商品列表
    productlist () {
      this.loading = true
      this.$axios
        .get(this.$api.productlist, {
          params: {
            page: this.page,
            ...this.form
          }
          ,
        })
        .then((res) => {
          this.loading = false
          this.searchBtn = false

          if (res.data.code == 1) {
            if (res.data.last_page == res.data.current_page) {
              this.finished = true
            } else {
              this.finished = false
            }

            this.list = this.list.concat(res.data.data);

          } else {
            this.err = true;
            this.loading = false;
          }
        });
    },
    //清除历史
    clearHistory () {
      Dialog.confirm({
        overlay: false,
        confirmButtonColor: "#ff7733",
        cancelButtonColor: "rgba(32,35,39,0.5)",
        message: '确定删除全部历史记录？',
      })
        .then(() => {
          // on confirm
          localStorage.removeItem('history');
          this.searchList = []
        })
        .catch(() => {
          // on cancel
        });
    },
    //点击导航栏切换结果
    onClick (name) {

      let search = this.form.name

      switch (name) {
        case 0:
          this.form = {
            name: search,
          }
          break;
        case 1:
          this.form = {
            name: search,
            sort_type: '2',
            sort: '2'
          }
          break;
        case 2:
          this.form.name = search
          this.form.sort_type = '3'

          if (!this.form.sort) {
            this.form.sort = '1'
          } else if (this.form.sort == '2') {
            this.form.sort = '1'
          } else {
            this.form.sort = '2'
          }
          this.sort = this.form.sort
          break;
      }

      this.list = []
      this.productlist()

    },

  }
};
</script>
<style lang='less' scoped>
/deep/.van-search {
  //background-color: transparent !important;
  button {
    width: 76px;
    height: 34px;
    background: #ff7733;
    border: 1px solid #ff7733;
  }
}
.img {
  /deep/ .van-image {
    width: 19px;
    height: 19px;
  }
}
/deep/ .van-field__left-icon {
  display: flex;
  align-items: center;
}
.history {
  margin: 20px 16px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      margin: 0;
      font-size: 16px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #201d1d;
    }
  }
  .list {
    display: flex;

    flex-wrap: wrap;
    .box {
      margin-right: 16px;
      margin-top: 12px;
      height: 34px;
      background: #ffffff;
      border-radius: 17px 17px 17px 17px;
      opacity: 1;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: rgba(32, 35, 39, 0.7);
      text-align: center;
      line-height: 34px;
      padding: 0px 16px;
    }
  }
}
.tabBox {
  font-size: 14px;
  width: 100%;

  /deep/.van-tabs__nav {
    width: 206.25px;
  }
  /deep/.van-tab__text {
    font-size: 14px;
    font-weight: 400;
  }
  /deep/.van-tab--active {
    font-weight: bold;
    color: #ff7733;
  }
  /deep/.van-tabs__line {
    width: 28px;
    height: 2px;
    background: #ff7733;
  }
  /deep/ .van-tabs__wrap {
    background: white;
    padding: 4.5px 15px;
    box-sizing: border-box;
  }
}
.title {
  display: flex;

  .left {
    flex-wrap: nowrap;
  }
  .img {
    width: 5px;
    height: 9px;
    margin-left: 5px;

    img {
      width: 100%;
      height: 100%;
      transform-origin: center center;
    }
  }
  .sort {
    transform: rotateX(180deg); /* 垂直镜像翻转 */
  }
}
</style>